<html>
<head>
    <link rel="stylesheet" href="/assets/css/metro-bootstrap.min.css">
    <link rel="stylesheet" href="/assets/css/metro-bootstrap-responsive.min.css">
    <link rel="stylesheet" href="/assets/css/iconFont.min.css">
    <script src="/assets/js/jquery/jquery.min.js"></script>
    <script src="/assets/js/jquery/jquery.widget.min.js"></script>
    <script src="/assets/js/metro.min.js"></script>
</head>
<body class="metro">
<div class="container">

    <nav class="navigation-bar">
        <nav class="navigation-bar-content">
            <a class="element brand" href="#"><span class="icon-laptop"></span>&nbsp;&nbsp;Saral</a>
            <span class="element-divider"></span>
        </nav>
    </nav>

    <div class="grid show-grid">
        <div class="row">
            <div class="span8 offset3">
                <div class="panel">
                    <div class="panel-header">
                        Welcome to Saral
                    </div>
                    <div class="panel-content">
                        Saral (which means Simple in Sanskrit), is a very simple, effective devices and asset tracking
                        system.
                        <br/><br/>
                        <fieldset>
                            <form action="/index.php/login" method="post">
                                <legend>Login to Saral</legend>
                                <label>Email</label>

                                <div class="input-control text" data-role="input-control">
                                    <input type="text" placeholder="type email" autofocus="" name="username">
                                    <button class="btn-clear" tabindex="1" type="button"></button>
                                </div>
                                <label>Password</label>

                                <div class="input-control password" data-role="input-control">
                                    <input type="password" placeholder="type password" name="password">
                                    <button class="btn-reveal" tabindex="2" type="button"></button>
                                </div>

                                <div id="errormessage" class="notice marker-on-top bg-red fg-white">
                                    Username or password is incorrect. Please try again.
                                </div>

                                <label>&nbsp;</label>
                                <button type="submit" class="large info">Sign in <span
                                        class="icon-arrow-right-3 on-right-more"></span></button>
                                <button type="button" class="large default right">Sign up <span
                                        class="icon-user on-right-more"></span></button>
                            </form>
                        </fieldset>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>